<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉刷新</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/css.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../../libs/jquery3_1_1.min.js"></script>
</head>
<body>
<div class="content">
    <div class="refresh">
        <i class="refresh-icon"></i>
        <span>下拉加载更多</span>
    </div>
    <div class="main"></div>
    <div class="load-more"></div>
</div>
</body>
</html>

<script>
    var MARGIN_TOP = "margin-top";
    $(function () {
        //让refresh隐藏
        $(".content").css(MARGIN_TOP, -$('.refresh')[0].offsetHeight + "px");
        //下拉事件
        $('.content')[0].addEventListener('touchstart', function (e) {
            var that = $(this);
            var lastPoint = e.touches[0].clientY;
            document.addEventListener('touchmove', function (e) {
                var currentMT = parseInt(that.css(MARGIN_TOP));
                that.css(MARGIN_TOP,currentMT+e.touches[0].clientY-lastPoint+'px');
                lastPoint = e.touches[0].clientY;
            })
        })

        $('.content')[0].addEventListener('touchend', function (e) {

        })

    });
</script>